<template>
	<view class="wrapper">
		<view class="header">
			<image v-if="config.logo" :src="config.logo" mode=""></image>
			<text>{{config.sys_title}}</text>
		</view>
		<button class="phone-btn" type="primary" open-type="getPhoneNumber" @getphonenumber="onLoginByPhone">手机号快捷登录</button>
		<view class="other-login" @click="toOtherLogin">
			<text>其他登录方式</text>
			<view class="img">
				<image src="../../static/images/phone.png" mode=""></image>
			</view>
		</view>
		<view class="policy">
			<u-checkbox-group width="50rpx" height="50rpx">
				<u-checkbox v-model="checked" shape="circle" @change="onChange"></u-checkbox>
			</u-checkbox-group>
			<view class="xy">
				阅读并同意<text>用户协议</text>、<text>隐私政策</text>、<text>服务监督协议</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCode,
	} from '@/common/helper.js'
	import store from '@/store/index.js'
	export default {
		data() {
			return {
				checked: false,
				code: '',
				config: store.state.config,
                mp_code: null,
			}
		},
		methods: {
			async onLoginByPhone(e) {
                let that = this;
				uni.showLoading({
					title: '登录中。。。',
					mask: true
				})
				if (!this.checked) return this.$u.toast('请同意协议')
				const res = await this.$request.post('login.loginByMobile', {
					...e.detail,
                    mp_code: that.mp_code,
				})
                this.$u.toast(res.msg);

                if (!res.errno) {
                    uni.setStorageSync('userInfo', res.data)

                    // #ifdef MP-WEIXIN || MP-TOUTIAO
                    uni.login({
                        success: function (res) {
                            that.$util.bindOpenid(res.code);
                        }
                    });
                    // #endif
                }
			},

			onChange() {
				this.checked = !this.checked
			},
			toOtherLogin() {
				uni.navigateTo({
					url: '/pages/login/otherLogin'
				});
			}
		},
		async onLoad(option) {
			// #ifdef MP
			this.mp_code = await getCode()
			// #endif

		}
	}
</script>

<style scoped lang="scss">
	.wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;

		.header {
			padding-top: 80rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 180rpx;
				height: 180rpx;
				margin-bottom: 20rpx;
			}

			text {
				font-weight: 600;
				font-size: 30rpx;
			}
		}

		.phone-btn {
			width: 80%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			color: #fff;
			background: rgb(71, 128, 245);
			border-radius: 50rpx;
			margin-top: 100rpx;
		}

		.other-login {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: fixed;
			bottom: 160rpx;
			left: 50%;
			transform: translateX(-50%);

			text {
				font-size: 30rpx;
				color: #ccc;
			}

			.img {
				width: 100rpx;
				height: 100rpx;
				background: rgb(71, 128, 245);
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;

				image {
					width: 50%;
					height: 60%;
				}
			}
		}

		.policy {
			width: 90%;
			display: flex;
			justify-content: center;
			position: fixed;
			bottom: 80rpx;
			left: 50%;
			transform: translateX(-50%);

			.xy {
				font-size: 24rpx;
				color: #ccc;
				margin-left: 6rpx;

				text {
					color: rgb(71, 128, 245);
				}
			}
		}
	}
</style>